<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Search Suggest</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/ajax.js"></script>
    <script type="text/javascript">
    	var trSrc;
    	function search() {
    		var inputWord = document.getElementById("inputWord").value;
    		var url = "search";
    		var params = "inputWord=" + inputWord;
    		sendRequest(url, params, 'POST', display);
    	}
    	
    	function display() {
    		if(xmlHttpRequest.readyState == 4) {
    			if(xmlHttpRequest.status == 200) {
    				var xmlDoc = xmlHttpRequest.responseXML;
    				clearDivData();
    				changeDivData(xmlDoc);
    			} else {
    				//页面不正常
    				alert("您请求的页面有异常");
    			}
    		}
    	}
    	
    	//清除下拉提示框中已有的数据
    	function clearDivData() {
    		var tbody = document.getElementById("wordsListTbody");
    		var trs = tbody.getElementsByTagName("tr");
    		for(var i = trs.length-1; i>=0; i--) {
    			tbody.removeChild(trs[i]);
    		}
    	}
    	
    	//设置用户选中条目的背景色
    	function setBgColor() {
    		if(trSrc) {
    			trSrc.style.backgroundColor="white";
    		}
    		//
    		trSrc=event.srcElement;
    		trSrc.style.backgroundColor="gray";
    	}
    	
    	//将用户选中条目显示在文本框中
    	function setText() {
    		document.getElementById("inputWord").value=trSrc.firstChild.data;
    		document.getElementById("wordsListDiv").style.visibility="hidden";
    	}
    	
    	//将数据加入下拉提示框
    	function changeDivData(xmlDoc) {
    		var words = xmlDoc.getElementsByTagName("word");
    		var tbody = document.getElementById("wordsListTbody");
    		for(i=0;i<words.length;i++) {
    			var newTr = document.createElement("tr");
    			var newCell = document.createElement("td");
    			var wordText = words[i].firstChild.data;
    			var textNode = document.createTextNode(wordText);
    			newCell.onmouseover = setBgColor;
    			newCell.onclick = setText;
    			newCell.appendChild(textNode);
    			newTr.appendChild(newCell);
    			tbody.appendChild(newTr);
    		}
    		if(words.length > 0) {
    			document.getElementById("wordsListDiv").style.visibility="visible";
    		} else {
    			document.getElementById("wordsListDiv").style.visibility="hidden";
    		}
    	}
    	
    	//设置下拉提示框的位置
    	function setDivPosition() {
    		var input = document.getElementById("inputWord");
    		var listdiv = document.getElementById("wordsListDiv");
    		listdiv.style.left = (input.offsetLeft) + 'px';
    		listdiv.style.border = "blue 1px solid";
    		listdiv.style.top=(input.offsetTop + input.offsetHeight) + 'px';
    		listdiv.style.width=input.offsetWidth + 'px';
    	}
    </script>
  </head>
  
  <body onload="setDivPosition()">
  	<p>搜索字符串：<input type="text" id="inputWord" onKeyUp="search()"/>
  	</p>
  	<div id="wordsListDiv" style="position:absolute;visibility:hidden">
  		<table id="wordsListTable">
  			<tbody id="wordsListTbody"><tr><td>test</td></tr></tbody>
  		</table>
  	</div>
  </body>
</html>
